<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div id="app">
        <input type="button" value="修改name" @click="changeName">
        <book id="book01" class="cls"  :name="name" author="罗贯中" @change="changeFn">
            <template #default>
                <div>默认插槽的内容</div>
            </template>
            <template #footer>
                <div>footer插槽的内容</div>
            </template>
        </book>        
    </div>
</body>
</html>

<script src="./js/vue.global.js"></script>

<script>    

    const {createApp,ref,computed} = Vue;


    // 定义一个组件：
    let book = {
        template:`
            <h1>书籍信息：</h1>
            <p>书名:{{name}}</p>
            <slot>默认插槽</slot>
            <p>作者:{{author}}</p>
            <slot name="footer">footer插槽</slot>
        `,        
        props:["name","author"],
        emits:["change"],
        setup(props,context){                          
            // 1、context.attrs: 是透传过来的属性，this.$attrs
            // console.log("book组件setup函数的context参数attrs",context.attrs);      
            // console.log(context.attrs.id);          
            // console.log(context.attrs.class);    

            // 2、context.slots：是插槽，this.$slots
            // console.log("book组件setup函数的context参数slots",context.slots);
            // console.log(context.slots.default());
            // console.log(context.slots.footer());

            // 3、context.emit：是触发事件的函数，this.$emit()
            // console.log("book组件setup函数的context参数emit",context.emit);
            context.emit("change",{name:"任晨阳"});

            // 4、context.expose：是父组件通过ref得到的子组件对象可以访问的属性和方法。（在下一个demo中写）
            
        }
    }

    let app = createApp({
        setup(){
            let name = ref("三国演义");
            function changeName(){
                name.value += "1";
            }
            function changeFn(obj){
                console.log("changeFn",obj);
            }
            return {
                name,changeName,changeFn
            }
        },
        components:{
            book
        }   
    })

    

    app.mount("#app");



</script>